<template>
  <div>
    <el-row :gutter="100" style="padding-bottom: 30px">
      <el-col class="header-col" :span="8">
        <el-card style="color: #67C23A">
          <div>
            <i class="el-icon-user"></i>
            用户总数
          </div>
          <div class="card-text">
            <!--            {{ this.userCount }}-->
            70
          </div>
        </el-card>
      </el-col>
      <el-col class="header-col" :span="8">
        <el-card style="color: #409EFF">
          <div>
            <i class="el-icon-shopping-bag-2"></i>
            订单数量
          </div>
          <div class="card-text">
            <!--            {{ this.fileCount }}-->
            134
          </div>
        </el-card>
      </el-col>
      <el-col class="header-col" :span="8">
        <el-card style="color: #E6A23C">
          <div>
            <i class="el-icon-position"></i>
            网站浏览量
          </div>
          <div class="card-text">
            766
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="lineBox">
      <div id="polyline-user" class="polyline"></div>
      <div id="polyline-order" class="polyline"></div>
      <div id="polyline-visits" class="polyline"></div>
    </div>
    <div class="lineBox">
      <div id="bar-user" class="polyline"></div>
      <div id="bar-order" class="polyline"></div>
      <div id="bar-visits" class="polyline"></div>
    </div>
    <div id="sc" class="lineBox" v-infinite-scroll="handleScroll">
      <div id="pie-user" class="polyline"></div>
      <div id="pie-order" class="polyline"></div>
      <div id="pie-visits" class="polyline"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'admin-home',

  components: {},
  data() {
    return {
      state: true,
    }
  },

  mounted() {
    this.createLineUser()
    this.createLineOrder()
    this.createLineVisits()
    this.createBarUser()
    this.createBarOrder()
    this.createBarVisits()

  },

  methods: {

    handleScroll() {

      if (this.state) {
        this.createPieUser()
        this.createPieOrder()
        this.createPieVisits()
        this.state = false
      }
    },

    createLineUser() {
      let chartDom = document.getElementById('polyline-user');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: '新用户',
          subtext: '近七天内新用户数量',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [3, 10, 5, 7, 13, 20, 12],
            type: 'line',

          }
        ]
      };

      option && myChart.setOption(option);

    },

    createLineOrder() {
      let chartDom = document.getElementById('polyline-order');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: '商品订单',
          subtext: '近七天内用户购买的商品订单',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [5, 13, 44, 20, 17, 21, 14],
            type: 'line'
          }
        ]
      };

      option && myChart.setOption(option);

    },

    createLineVisits() {
      let chartDom = document.getElementById('polyline-visits');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: '网站访问量',
          subtext: '近七天内网站的浏览量',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [20, 94, 62, 88, 137, 221, 144],
            type: 'line'
          }
        ]
      };

      option && myChart.setOption(option);

    },

    createBarUser() {
      let chartDom = document.getElementById('bar-user');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [3, 10, 5, 7, 13, 20, 12],
            type: 'bar',
            showBackground: true,
            colorBy: '#67C23A',
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    createBarOrder() {
      let chartDom = document.getElementById('bar-order');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [5, 13, 44, 20, 17, 21, 14],
            type: 'bar',
            showBackground: true,
            colorBy: '#67C23A',
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    createBarVisits() {
      let chartDom = document.getElementById('bar-visits');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [20, 94, 62, 88, 137, 221, 144],
            type: 'bar',
            showBackground: true,
            colorBy: '#67C23A',
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },

    createPieUser() {
      let chartDom = document.getElementById('pie-user');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          trigger: 'item'
        },
/*        legend: {
          orient: 'vertical',
          left: 'left'
        },*/
        series: [
          {
            name: '新用户数量',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 3, name: '星期一' },
              { value: 10, name: '星期二' },
              { value: 5, name: '星期三' },
              { value: 7, name: '星期四' },
              { value: 13, name: '星期五' },
              { value: 20, name: '星期六' },
              { value: 12, name: '星期天' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        // animation: this.state
      };

      option && myChart.setOption(option);
    },
    createPieOrder() {
      let chartDom = document.getElementById('pie-order');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          trigger: 'item'
        },
        /*        legend: {
                  orient: 'vertical',
                  left: 'left'
                },*/
        series: [
          {
            name: '商品订单数量',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 5, name: '星期一' },
              { value: 13, name: '星期二' },
              { value: 44, name: '星期三' },
              { value: 20, name: '星期四' },
              { value: 17, name: '星期五' },
              { value: 21, name: '星期六' },
              { value: 14, name: '星期天' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    createPieVisits() {
      let chartDom = document.getElementById('pie-visits');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          trigger: 'item'
        },
        /*        legend: {
                  orient: 'vertical',
                  left: 'left'
                },*/
        series: [
          {
            name: '网站访问量',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 20, name: '星期一' },
              { value: 94, name: '星期二' },
              { value: 62, name: '星期三' },
              { value: 88, name: '星期四' },
              { value: 137, name: '星期五' },
              { value: 221, name: '星期六' },
              { value: 144, name: '星期天' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>
.header-col {
  font-size: 16px;

  .card-text {
    padding: 10px 0;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
  }
}

.lineBox {
  display: flex;
  .polyline {
    width: 100%;
    height: 400px;
  }
}

</style>
